Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Update Reviews blocks so they use block styles #4323

Merged
merged 3 commits into from
Sep 16, 2021
Merged

Update Reviews blocks so they use block styles #4323

merged 3 commits into from
Sep 16, 2021

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Jun 8, 2021 •
edited
Loading

Fixes #1676.
Fixes #4302.

This PR:

  1. Adds global styles to Reviews blocks so its possible to change the text color and font size.
  2. Updates Reviews blocks styling so there are no hard-coded colors and so everything aligns well with different font sizes.
  3. Updates component EditorContainerBlock to a functional component.

Screenshots

Default display (before) Default display (after)
imatge imatge

Tweaking some colors and font size in Storefront:
imatge

How to test the changes in this Pull Request:

  1. In a classic theme (ie: Storefront):
    1. Add the All Reviews block to a post or page.
    2. Verify you can change the text color and font size.
    3. Repeat the process for the Reviews by Category and Reviews by Product blocks.
  2. In a block-based theme (ie: TT1 Blocks) with Gutenberg enabled:
    1. Go to Appearance > Site editor, click on the Global styles icon and verify the All Reviews block is shown and you can tweak its styles:
      imatge
    2. Add the All Reviews block to a post or page.
    3. Verify it honors the styles you set in the Site editor.
    4. Change the styles in the post/page editor and verify they have priority over the styles from the Site editor.
    5. Repeat the process for the Reviews by Category and Reviews by Product blocks.

Changelog

Added global styles to All Reviews, Reviews by Category and Reviews by Product blocks. Now it's possible to change the text color and font size of those blocks.

@Aljullu Aljullu added status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. type: enhancement The issue is a request for an enhancement. block-type: reviews Issues related to all of the reviews related blocks. labels Jun 8, 2021
@Aljullu Aljullu self-assigned this Jun 8, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Jun 8, 2021 •
edited
Loading

Size Change: +1.69 kB (0%)

Total Size: 1.19 MB

Filename Size Change
build/active-filters-frontend.js 8.39 kB +9 B (0%)
build/active-filters.js 8.02 kB +8 B (0%)
build/all-products-frontend.js 23.1 kB +4 B (0%)
build/all-products.js 37 kB -2 B (0%)
build/all-reviews.js 9.64 kB +53 B (+1%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.65 kB +2 B (0%)
build/atomic-block-components/add-to-cart.js 7.73 kB -3 B (0%)
build/atomic-block-components/button-frontend.js 1.74 kB -1 B (0%)
build/atomic-block-components/image-frontend.js 1.88 kB +1 B (0%)
build/atomic-block-components/price-frontend.js 2.09 kB +1 B (0%)
build/atomic-block-components/price.js 2.11 kB +3 B (0%)
build/atomic-block-components/rating-frontend.js 562 B -1 B (0%)
build/atomic-block-components/sale-badge-frontend.js 859 B -1 B (0%)
build/attribute-filter-frontend.js 18.7 kB +11 B (0%)
build/attribute-filter.js 12.2 kB +10 B (0%)
build/blocks-checkout.js 21 kB +1 B (0%)
build/cart-frontend.js 91.3 kB +251 B (0%)
build/cart.js 46.3 kB +303 B (+1%)
build/checkout-frontend.js 95.2 kB +51 B (0%)
build/checkout-i2-frontend.js 52.5 kB -2 B (0%)
build/checkout-i2.js 49.4 kB +80 B (0%)
build/checkout.js 49 kB +66 B (0%)
build/featured-category.js 7.81 kB +3 B (0%)
build/featured-product.js 9.51 kB -1 B (0%)
build/mini-cart-component-frontend.js 36.5 kB +323 B (+1%)
build/mini-cart.js 2.35 kB +2 B (0%)
build/price-filter-frontend.js 14.5 kB +9 B (0%)
build/price-filter.js 9.71 kB +10 B (0%)
build/price-format.js 1.37 kB -3 B (0%)
build/product-search.js 2.66 kB -1 B (0%)
build/product-tag.js 6.67 kB +2 B (0%)
build/product-top-rated.js 6.82 kB +1 B (0%)
build/products-by-attribute.js 7.79 kB +2 B (0%)
build/reviews-by-category.js 11.5 kB -20 B (0%)
build/reviews-by-product.js 13 kB -10 B (0%)
build/reviews-frontend.js 8.99 kB -31 B (0%)
build/single-product-frontend.js 26.2 kB +1 B (0%)
build/single-product.js 9.79 kB +2 B (0%)
build/stock-filter-frontend.js 8.8 kB +57 B (+1%)
build/stock-filter.js 7.8 kB +69 B (+1%)
build/vendors--atomic-block-components/add-to-cart-frontend.js 20.3 kB -2 B (0%)
build/wc-blocks-data.js 11.1 kB -5 B (0%)
build/wc-blocks-editor-style-rtl.css 15.6 kB +52 B (0%)
build/wc-blocks-editor-style.css 15.6 kB +52 B (0%)
build/wc-blocks-middleware.js 1.47 kB -4 B (0%)
build/wc-blocks-registry.js 3.73 kB +56 B (+2%)
build/wc-blocks-style-rtl.css 20.8 kB +142 B (+1%)
build/wc-blocks-style.css 20.7 kB +140 B (+1%)
build/wc-blocks-vendors.js 254 kB +11 B (0%)
build/wc-blocks.js 3.5 kB -1 B (0%)
build/wc-settings.js 2.91 kB -9 B (0%)
ℹ️ View Unchanged
Filename Size
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 333 B
build/atomic-block-components/add-to-cart-frontend.js 8.38 kB
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list-frontend.js 469 B
build/atomic-block-components/category-list.js 476 B
build/atomic-block-components/image.js 1.35 kB
build/atomic-block-components/rating.js 567 B
build/atomic-block-components/sale-badge.js 868 B
build/atomic-block-components/sku-frontend.js 388 B
build/atomic-block-components/sku.js 394 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 612 B
build/atomic-block-components/summary-frontend.js 905 B
build/atomic-block-components/summary.js 911 B
build/atomic-block-components/tag-list-frontend.js 466 B
build/atomic-block-components/tag-list.js 473 B
build/atomic-block-components/title-frontend.js 1.44 kB
build/atomic-block-components/title.js 1.29 kB
build/handpicked-products.js 6.35 kB
build/mini-cart-frontend.js 2.35 kB
build/product-best-sellers.js 6.7 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.56 kB
build/product-new.js 6.85 kB
build/product-on-sale.js 7.2 kB
build/vendors--atomic-block-components/price-frontend.js 5.72 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB

compressed-size-action

@Aljullu Aljullu force-pushed the fix/reviews-block-styles branch 4 times, most recently from a3de28a to a987412 Compare June 18, 2021 08:45
@Aljullu Aljullu force-pushed the fix/reviews-block-styles branch from a987412 to c51c897 Compare September 8, 2021 12:08
@Aljullu Aljullu force-pushed the fix/reviews-block-styles branch from c51c897 to a5ee100 Compare September 10, 2021 14:54
@Aljullu Aljullu force-pushed the fix/reviews-block-styles branch from a5ee100 to 3278522 Compare September 10, 2021 14:55
@Aljullu Aljullu removed the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Sep 10, 2021
@Aljullu Aljullu marked this pull request as ready for review September 10, 2021 15:12
@Aljullu Aljullu requested a review from a team as a code owner September 10, 2021 15:12
@Aljullu Aljullu requested review from mikejolley and removed request for a team September 10, 2021 15:12
@Aljullu Aljullu added focus: FSE Work related to prepare WooCommerce for FSE. status: needs review labels Sep 10, 2021
mikejolley
mikejolley approved these changes Sep 15, 2021
View reviewed changes
Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow that new editor is super confusing 😅

Works great. I tested on both and it works as described. Only comment from my side would be, do you think it would make sense to scale the avatar with the text size?

Other than that, good to go 👍🏻

@Aljullu
Copy link
Contributor Author

Aljullu commented Sep 16, 2021

Only comment from my side would be, do you think it would make sense to scale the avatar with the text size?

Good idea. Implemented in a657155. I had to remove srcSet because now that the image size depends on the font size, we can't know in advance which size is needed.

@Aljullu Aljullu merged commit eebc7a6 into trunk Sep 16, 2021
@Aljullu Aljullu deleted the fix/reviews-block-styles branch September 16, 2021 09:32
@Aljullu Aljullu added this to the 6.0.0 milestone Sep 16, 2021
@Aljullu Aljullu mentioned this pull request Oct 8, 2021
Closed
@opr opr mentioned this pull request Oct 13, 2021
Merged
@Aljullu Aljullu mentioned this pull request Oct 19, 2021
Closed
18 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@mikejolley mikejolley mikejolley approved these changes

Assignees

@Aljullu Aljullu

Labels
block-type: reviews Issues related to all of the reviews related blocks. focus: FSE Work related to prepare WooCommerce for FSE. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Milestone
6.0.0
2 participants
@Aljullu @mikejolley